<template>
    <div class="product">
        <div class="show-box" v-for="(item, index) in docs" 
            :key="item.tradeItemId+index"
            @click="gotoDetail(item)"
        >
            <div class="showbox-img">
                <img :src="item.img" alt />
                <img
                    class="imgs"
                    src=""
                >
            </div>
            <p class="showbox-det" v-if="$route.name != 'search'">{{ item.title }}</p>
            <div class="item-tag" v-if="$route.name == 'search'">
                <span v-for="(v, i) in item.props" :key="i">{{v}}</span>
            </div>
            <div class="showbox-price">
                <div>￥{{ item.price }}</div>
                <div class="showbox-likes">
                    <span>{{ item.cfav }}</span>
                    <span class="icon iconfont icon-like"></span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        docs: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    methods: {
        gotoDetail(pro) {
            localStorage.setItem(pro.tradeItemId,JSON.stringify(pro));
            this.$router.push({
                name:"detail",
                query:{
                    iid:pro.tradeItemId
                }
            })
        }
    }
};
</script>
<style lang="less" scoped>
.product {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: left;

    .show-box {
        box-sizing: border-box;
        width: 50%;
        // height: 650px;
        padding: 20px;
        // border: 1px solid red;
        .showbox-img {
            width: 100%;
            height: 80%;
            position: relative;
            border-radius: 15px 15px 0 0;
            overflow: hidden;
            :first-child {
                width: 100%;
                height: 100%;
                object-fit: scale-down;
                // border-radius:15px 15px 0 0;
            }
            > .imgs {
                position: absolute;
                width: 20%;
                right: 5px;
                bottom: 5px;
            }
        }
        .showbox-det {
            width: 100%;
            // height: 10%;
            padding: 8px;
            overflow: hidden;
            font-size: 16px;
            text-indent: 32px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
        .item-tag {
            box-sizing: border-box;
            overflow: hidden;
            width: 100%;
            height: 110px;
            padding: 0 10px;
            font-size: 20px;
            span {
                display: inline-block;
                padding: 5px 10px;
                background-color: rgb(182, 222, 235);
                border-radius: 10px;
                margin-right: 5px;
                margin-top: 10px;
                color: rgb(14, 79, 100);
            }
        }
        .showbox-price {
            width: 100%;
            height: 10%;
            display: flex;
            justify-content: space-between;
            > :first-child {
                font-size: 36px;
                font-weight: bold;
            }
            > .showbox-likes {
                :first-child {
                    font-size: 16px;
                    margin-right: 10px;
                    color: @99;
                }
                :last-child {
                    color: @99;
                }
            }
        }
    }
}
</style>